<template>
  <div @mouseenter="handleMouseOver" @mouseleave="handleMouseOut">
    <div class="menu-item" @click="selectHandler">
      <div v-if="showButton && reorder === true && !item.knowledgeLibFieldId" class="inline reorder-button-group">
        <el-button class="inline reorder-button" plain type="primary" @click.stop="moveUp">上移</el-button>
        <el-button class="inline reorder-button" plain type="primary" @click.stop="moveDown">下移</el-button>
      </div>
      <div :style="{color: item.selected ? '#2DB7A0' : ''}" :title="item.name || item.fieldName"
           class="menu-label">
        <div v-if="item.taskItemList && item.taskItemList.length>0" style="color: red; display: inline-block ">
          <span class="status-danger"
                style="color: white;text-align:center;line-height: 14px;font-size: 10px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;"
                v-html=" item.taskItemList.length">
          </span>
        </div>
        <div :style="{maxWidth: menuWidth + 'px'}" style="display: inline-block;max-width:256px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden" v-html="item.name || item.fieldName"></div>
      </div>
      <div :style="{backgroundColor: item.selected ? '#2DB7A0' : '#dcdfe6'}" class="menu-flag"></div>

    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
export default {
  name: "MenuItem",
  props: {
    item: Object,
    reorder: {
      type: Boolean,
      default: false
    },
    index: Number
  },
  data() {
    return {
      showButton: false,
      menuWidth: 0
    }
  },
  methods: {
    selectHandler() {
      this.$emit('change-selection', this.item);
    },
    handleMouseOver() {
      this.showButton = true
    },
    handleMouseOut() {
      this.showButton = false
    },
    moveUp() {
      this.$emit("move-up", this.index)
    },
    moveDown() {
      this.$emit("move-down", this.index)
    }
  },
  created() {
    this.menuWidth = CONST.WORKSPACE_WIDTH - 1080
  }
}
</script>

<style scoped>
.menu-item {
  width: 100%;
  height: 32px;
  display: flex;
  float: right;
  cursor: pointer;
}

.menu-label {
  width: 100%;
  text-align: right;
  display: inline-block;
  height: 32px;
  margin-right: 5px;
  white-space: nowrap;
}

.menu-flag {
  display: inline-block;
  height: 100%;
  width: 2px;
  float: right;
}

.inline {
  display: inline-block;
}

.reorder-button {
  width: 38px;
  height: 20px;
  padding: 0;
  margin: 0;
  vertical-align: sub;
}

.reorder-button-group {
  width: 100%;
  margin-right: 5px;
}

.status-danger {
  display: inline-block;
  width: 30px;
  height: 14px;
  background: #f56c6c;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid #f56c6c;
  /*vertical-align: top;*/
}

.status-success {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: white;
  border-radius: 50%;
  border: 1px solid white;

}

.clear {
  clear: both;
}
</style>
